<template>
  <div class="app-container">
    <div class="web">
      <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-submenu :index="item.id" v-for="(item,index) in classifyList" :key="index">
          <template slot="title">{{item.title}}</template>
          <el-menu-item :index="item1.id" v-for="(item1,index1) in item.children" :key="index1">{{item1.title}}</el-menu-item>
        </el-submenu>
      </el-menu> -->
      <el-tabs v-model="activeName" @tab-click="handleClickone">
        <el-tab-pane :label="item.title" :name="item.title" v-for="(item,index) in classifyList" :key="index">
          <el-tabs v-model="activeName1" @tab-click="handleClicktwo">
            <el-tab-pane :label="item1.title" :name="item1.id" v-for="(item1,index1) in item.children" :key="index1">
              <div class="videolist">
                <div class="item" v-for="(item,index) in tableData" :key="index" @click="lookdetail(item)">
                  <div class="item-img">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="item-text">
                    <p class="item-text-title">
                      {{item.title}}
                    </p>
                    <p class="item-text-content">{{item.teacherId}}</p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { threeList,selectMiaoshu } from '@/api/people'
export default {
  data(){
    return{
      activeName: '',
      activeName1: '',
      activeIndex: '',
      classifyList: [],
      tableData: []
    }
  },
  mounted(){
    console.log(this.$route.params)
    this.getFenlei()
  },
  methods: {
    getFenlei(){
      threeList().then(res => {
        console.log(res)
        this.classifyList = res.data.items
        this.activeIndex = res.data.items[0].id
      })
    },
    handleClickone(item){
      console.log(item)
    },
    /**
     * 筛选
     */
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClicktwo(item){
      console.log('erji',item.name)
      this.getKecheng(item.name)
    },
    getKecheng(id){
      selectMiaoshu(id).then(res => {
        console.log(res)
        this.tableData = res.data.item
      }).catch(res => {
        console.log(res)
      })
    },
    save(){
      console.log(this.content)
    },
    /**
     * 查看视频详情
     */
    lookdetail(item){
      this.$router.push({
        name: 'Zhangjie',
      })
      sessionStorage.setItem('videoDetail',JSON.stringify(item))
    },
  }
}
</script>

<style scoped lang="scss">
/deep/.el-tabs__item.is-active {
  color: #18a05e;
}
/deep/.el-tabs__active-bar {
  background-color: #18a05e;
}
/deep/.el-tabs__item:hover {
  color: #18a05e;
  cursor: pointer;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.web{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
}
.videolist{
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  .item{
    width: 236px;
    padding: 8px;
    margin: 0px 5px 10px 5px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all .5s;
    -webkit-transition: all .5s;
    &:hover{
      box-shadow: 0 0 5px rgba(0,0,0,.2)
    }
    &-img{
      width: 100%;
      height: 124px;
      >img{
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0,0,0,.2);
      }
    }
    &-text{
      >p{
        margin: 0;
      }
      &-title{
        font-size: 14px;
        padding: 5px 0;
        line-height: 1.5;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      &-content{
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>